<!--
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2020/09/18 04:09:54
  @file: my-swiper.vue
  @description:
  ==================
  轮播组件封装 基于"vue-awesome-swiper": "3.1.3", swiper4.5.1
  http://dongjunhui.com/archives/66/
  [demo page](https://github.surmon.me/vue-awesome-swiper/)
  [官方API文档](https://www.swiper.com.cn/api/start/new.html)
  ==================
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <div class="my-swiper">
    <swiper ref="mySwiper" :options="thisSwiperOption">
      <swiper-slide :class="thisSwiperOption.noSwiping?'swiper-no-swiping':''" v-for="(item,index) in swiperList" :key="index">
        <img :src="item.img_url" :alt="item.name?item.name:''">
      </swiper-slide>
      <div v-if="!(swiperList.length === 1)" class="swiper-pagination" slot="pagination"></div>
      <!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
      <!-- <div class="swiper-button-next" slot="button-next"></div> -->
    </swiper>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper/src/index';
export default {
  name: 'my-swiper',
  components: { swiper, swiperSlide },
  props: {
    swiperList: { type: Array, require: true }
  },
  computed: {
    thisSwiperOption () {
      const isOne = this.swiperList.length
        ? this.swiperList.length === 1
        : true;
      return {
        // navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
        loop: true,
        pagination: { el: '.swiper-pagination', clickable: true },
        autoplay: isOne ? false : {
          disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
          delay: 3000 // 自动切换的时间间隔（单位ms）
        },
        noSwiping: isOne
      };
    }
  }
};

</script>

<style lang='scss'>
$font-size-huge: 12px;
$white: #ffffff;
// 个人命名
.my-swiper {
  // swiper 容器
  .swiper-container {
    // swiper 外层包裹的
    .swiper-wrapper {
      // 每个swiper可以滑动的
      .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-weight: bold;
        font-size: $font-size-huge * 2;
        background-color: $white;
        img {
          width: 100%;
        }
      }
    }
    .swiper-pagination.swiper-pagination-bullets {
      bottom: 20%;
      .swiper-pagination-bullet {
        background: #ffffff;
        opacity: 1;
        padding: 0.2%;
        margin: 0 1%;
      }
      .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: var(--themeAColor);
      }
    }
  }
}
</style>
